<template>
  <div class="haloe-page__title" v-if="showTotal">共{{total}}条记录</div>
  <div class="haloe-page__opts" v-if="showSizer">
    每页显示
    <e-select
      :transfer="transfer"
      :transfer-class-name="transferClassName"
      v-model="currentPageSize"
      :options="pageSizeOpts"
      @on-change="changeSize"
      size="middle"
    >
      <e-option
        v-for="item in pageSizeOpts"
        :value="item"
        :key="item"
      >{{ item }}</e-option>
    </e-select>条
  </div>
</template>

<script setup>
import {
  ref,
  defineProps,
  defineEmits,
  toRefs,
  watch,
} from 'vue'
import eSelect from '../select'
import eOption from "../select/option.vue"
const props = defineProps({
  total: { //总数据行数
    type: Number
  },
  pageSize: { // 每页显示数量
    type: Number,
    default: 10
  },
  pageSizeOpts:{ // 用户配置每页条数切换
    type:Array,
    default: ()=> [10,20,30,40]
  },
  // 显示总数
  showTotal: {
    type: Boolean,
    default: true,
  },
  // 显示分页，用来改变page-size
  showSizer: {
    type: Boolean,
    default: true,
  },

  //select transfer
  transfer:{
    type: Boolean,
    default:false
  },
  transferClassName:String
})

// 事件注册
const emits = defineEmits(['on-size'])

const {pageSize,pageSizeOpts, showTotal} = toRefs(props)

//当前每页显示数量
let currentPageSize = ref(pageSize.value)

//监听用户选择变化
watch(pageSize,(value)=>{
  currentPageSize.value = value
})

// 修改pageSize事件回调函数
function changeSize(){
  emits('on-size', currentPageSize.value);
}

</script>
